<template>
  <div>
    <t-card title="本月采购申请情况">
      <t-row :gutter="[16, 24]">
        <t-col
          v-for="(item, index) in shenqingInfo"
          :key="index"
          :span="3"
          class="colItem"
        >
          <t-card class="cardItem" hoverShadow>
            <span class="title"> {{ item.title }}</span>
            <div class="num">{{ item.num }}</div>
            <div class="booter">
              <div class="left">
                <span class="booterTitle">环比</span>
                <icon-font
                  name="arrow-up"
                  v-if="item.up > 0"
                  class="icon"
                  :style="{ color: 'orangered' }"
                />
                <icon-font
                  name="arrow-down"
                  v-else
                  class="icon"
                  :style="{ color: 'orangered' }"
                />
                <span class="upNum"> {{ absUp(item.up) }} %</span>
              </div>
              <icon-font
                name="chevron-right"
                :style="{ color: 'orangered' }"
              ></icon-font>
            </div>
          </t-card>
        </t-col>
      </t-row>
    </t-card>
    <t-row :gutter="[16, 24]" class="rowItem">
      <t-col :span="9">
        <t-card title="采购商品申请趋势" subtitle="(件)">
          <template #actions>
            <t-date-range-picker
              style="width: 240px"
              :default-value="LAST_7_DAYS"
              theme="primary"
              mode="date"
              @change="onMaterialChange"
            />
          </template>
          <div id="lineChart" style="width: 100%; height: 410px"></div>
        </t-card>
      </t-col>
      <t-col :span="3">
        <t-card :bordered="false">
          <template #avatar>
            <t-avatar size="56px" :icon="icon" />
          </template>
          <template #status>
            <t-tag theme="success">已启用</t-tag>
          </template>
          <template #content>
            <p class="contentTitle">SVG</p>
            <p class="contentInfo">
              SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多
            </p>
          </template>
          <template #footer class="footer">
            <t-avatar-group cascading="left-up" :max="2">
              <t-avatar>B</t-avatar>
              <t-avatar>
                <template #icon>
                  <add-icon />
                </template>
              </t-avatar>
            </t-avatar-group>
            <t-dropdown
              trigger="click"
              :options="[
                {
                  content: '管理',
                  value: 'manage',
                  onClick: () => handleManageProduct(item),
                },
                {
                  content: '删除',
                  value: 'delete',
                  onClick: () => handleDeleteItem(item),
                },
              ]"
              :min-column-width="112"
              class="dropdown"
            >
              <t-button variant="text" shape="square">
                <more-icon size="24" />
              </t-button>
            </t-dropdown>
          </template>
        </t-card>
        <t-card :bordered="false" class="cardL">
          <template #avatar>
            <t-avatar size="56px" :icon="icon" />
          </template>
          <template #status>
            <t-tag theme="success">已启用</t-tag>
          </template>
          <template #content>
            <p class="contentTitle">SVG</p>
            <p class="contentInfo">
              SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多
            </p>
          </template>
          <template #footer class="footer">
            <t-avatar-group cascading="left-up" :max="2">
              <t-avatar>B</t-avatar>
              <t-avatar>
                <template #icon>
                  <add-icon />
                </template>
              </t-avatar>
            </t-avatar-group>
            <t-dropdown
              trigger="click"
              :options="[
                {
                  content: '管理',
                  value: 'manage',
                  onClick: () => handleManageProduct(item),
                },
                {
                  content: '删除',
                  value: 'delete',
                  onClick: () => handleDeleteItem(item),
                },
              ]"
              :min-column-width="112"
              class="dropdown"
            >
              <t-button variant="text" shape="square">
                <more-icon size="24" />
              </t-button>
            </t-dropdown>
          </template>
        </t-card>
      </t-col>
    </t-row>
    <t-row class="rowItem" :gutter="[16, 24]">
      <t-col>
        <t-card title="采购商品满意度分布">
          <template #actions>
            <t-date-range-picker
              style="width: 240px"
              :default-value="LAST_7_DAYS"
              theme="primary"
              mode="date"
              @change="onMaterialChange"
            />
            <t-button :style="{ marginLeft: '10px' }">导出数据</t-button>
          </template>
          <div id="pushEcharts" style="width: 100%; height: 410px"></div>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import { AddIcon, MoreIcon, UserIcon } from "tdesign-icons-vue";
export default {
  components: {
    IconFont,
    AddIcon,
    MoreIcon,
  },
  mounted() {
    this.drawLineChart();
    this.drawPushChart();
  },
  data() {
    return {
      LAST_7_DAYS: ["2022-01-01", "2022-08-08"],
      shenqingInfo: [
        {
          title: "总申请数（次）",
          num: 1126,
          up: 10,
        },
        {
          title: "供应商数量（个）",
          num: 13,
          up: -13,
        },
        {
          title: "采购商品品类（类）",
          num: 4,
          up: 10,
        },
        {
          title: "申请人数量（人）",
          num: 90,
          up: -44,
        },
        {
          title: "申请完成率（%）",
          num: 80.5,
          up: 70,
        },
        {
          title: "到货及时率（%）",
          num: 78,
          up: 16,
        },
      ],
    };
  },
  computed: {},
  methods: {
    absUp(up) {
      return Math.abs(up);
    },
    handleManageProduct() {},
    handleDeleteItem() {},
    icon() {
      return <UserIcon />;
    },
    drawLineChart() {
      let myChart = this.$echarts.init(document.getElementById("lineChart"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
    },
    drawPushChart() {
      let myChart = this.$echarts.init(document.getElementById("pushEcharts"));
      const hours = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "5",
        "7",
        "8",
        "9",
        "10",
        "11",
      ];
      const days = [
        "Saturday",
        "Friday",
        "Thursday",
        "Wednesday",
        "Tuesday",
        "Monday",
        "Sunday",
      ];
      const data = [
        [0, 0, 5],
        [0, 1, 1],
        [0, 2, 0],
        [0, 3, 0],
        [0, 4, 0],
        [0, 5, 0],
        [0, 6, 0],
        [0, 7, 0],
        [0, 8, 0],
        [0, 9, 0],
        [0, 10, 0],
        [0, 11, 2],
        [0, 12, 4],
        [0, 13, 1],
        [0, 14, 1],
        [0, 15, 3],
        [0, 16, 4],
        [0, 17, 6],
        [0, 18, 4],
        [0, 19, 4],
        [0, 20, 3],
        [0, 21, 3],
        [0, 22, 2],
        [0, 23, 5],
        [1, 0, 7],
        [1, 1, 0],
        [1, 2, 0],
        [1, 3, 0],
        [1, 4, 0],
        [1, 5, 0],
        [1, 6, 0],
        [1, 7, 0],
        [1, 8, 0],
        [1, 9, 0],
        [1, 10, 5],
        [1, 11, 2],
        [1, 12, 2],
        [1, 13, 6],
        [1, 14, 9],
        [1, 15, 11],
        [1, 16, 6],
        [1, 17, 7],
        [1, 18, 8],
        [1, 19, 12],
        [1, 20, 5],
        [1, 21, 5],
        [1, 22, 7],
        [1, 23, 2],
        [2, 0, 1],
        [2, 1, 1],
        [2, 2, 0],
        [2, 3, 0],
        [2, 4, 0],
        [2, 5, 0],
        [2, 6, 0],
        [2, 7, 0],
        [2, 8, 0],
        [2, 9, 0],
        [2, 10, 3],
        [2, 11, 2],
        [2, 12, 1],
        [2, 13, 9],
        [2, 14, 8],
        [2, 15, 10],
        [2, 16, 6],
        [2, 17, 5],
        [2, 18, 5],
        [2, 19, 5],
        [2, 20, 7],
        [2, 21, 4],
        [2, 22, 2],
        [2, 23, 4],
        [3, 0, 7],
        [3, 1, 3],
        [3, 2, 0],
        [3, 3, 0],
        [3, 4, 0],
        [3, 5, 0],
        [3, 6, 0],
        [3, 7, 0],
        [3, 8, 1],
        [3, 9, 0],
        [3, 10, 5],
        [3, 11, 4],
        [3, 12, 7],
        [3, 13, 14],
        [3, 14, 13],
        [3, 15, 12],
        [3, 16, 9],
        [3, 17, 5],
        [3, 18, 5],
        [3, 19, 10],
        [3, 20, 6],
        [3, 21, 4],
        [3, 22, 4],
        [3, 23, 1],
        [4, 0, 1],
        [4, 1, 3],
        [4, 2, 0],
        [4, 3, 0],
        [4, 4, 0],
        [4, 5, 1],
        [4, 6, 0],
        [4, 7, 0],
        [4, 8, 0],
        [4, 9, 2],
        [4, 10, 4],
        [4, 11, 4],
        [4, 12, 2],
        [4, 13, 4],
        [4, 14, 4],
        [4, 15, 14],
        [4, 16, 12],
        [4, 17, 1],
        [4, 18, 8],
        [4, 19, 5],
        [4, 20, 3],
        [4, 21, 7],
        [4, 22, 3],
        [4, 23, 0],
        [5, 0, 2],
        [5, 1, 1],
        [5, 2, 0],
        [5, 3, 3],
        [5, 4, 0],
        [5, 5, 0],
        [5, 6, 0],
        [5, 7, 0],
        [5, 8, 2],
        [5, 9, 0],
        [5, 10, 4],
        [5, 11, 1],
        [5, 12, 5],
        [5, 13, 10],
        [5, 14, 5],
        [5, 15, 7],
        [5, 16, 11],
        [5, 17, 6],
        [5, 18, 0],
        [5, 19, 5],
        [5, 20, 3],
        [5, 21, 4],
        [5, 22, 2],
        [5, 23, 0],
        [6, 0, 1],
        [6, 1, 0],
        [6, 2, 0],
        [6, 3, 0],
        [6, 4, 0],
        [6, 5, 0],
        [6, 6, 0],
        [6, 7, 0],
        [6, 8, 0],
        [6, 9, 0],
        [6, 10, 1],
        [6, 11, 0],
        [6, 12, 2],
        [6, 13, 1],
        [6, 14, 3],
        [6, 15, 4],
        [6, 16, 0],
        [6, 17, 0],
        [6, 18, 0],
        [6, 19, 0],
        [6, 20, 1],
        [6, 21, 2],
        [6, 22, 2],
        [6, 23, 6],
      ].map(function (item) {
        return [item[1], item[0], item[2]];
      });
      let option = {
        title: {
          text: "Punch Card of Github",
        },
        legend: {
          data: ["Punch Card"],
          left: "right",
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            return (
              params.value[2] +
              " commits in " +
              hours[params.value[0]] +
              " of " +
              days[params.value[1]]
            );
          },
        },
        grid: {
          left: 2,
          bottom: 10,
          right: 10,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: hours,
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: days,
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "Punch Card",
            type: "scatter",
            symbolSize: function (val) {
              return val[2] * 2;
            },
            data: data,
            animationDelay: function (idx) {
              return idx * 5;
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.colItem {
  .cardItem {
    padding: 15px 0 0 0;
  }
  .title {
    color: #ccc;
    font-size: 15px;
  }
  .num {
    font-size: 25px;
    font-weight: 500;
    margin-top: 10px;
  }
  .booter {
    .left {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .booterTitle {
      font-size: 14px;
    }
    .upNum {
      color: orange;
    }
  }
}
.rowItem {
  margin-top: 20px;
}
.contentTitle {
  font-size: 16px;
  margin-bottom: 5px;
}
.contentInfo {
  font-size: 12px;
  color: #ccc;
  height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardL {
  margin-top: 10px;
}
</style>
